<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业三</title>
    <link rel="shortcut icon" href="#"/>
</head>
<style type="text/css">
	.gq{
		width: 200px;
		height: 100px;
		background-color:rgba(0,0,0,0.5);
		
	}
</style>

<body>
    <audio class="gq" src="../zuoye3/周子珺 - 琴师 (二胡版片段).mp3" controls="controls"></audio>
    <div class="gq_gc"></div>

</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
	var arr = []; //歌词文件数组
	var timer = []; //歌词的时间
	var gc = []; //时间对应的歌词
    $.ajax({
        type: "get",
        url: "../zuoye3/琴师.lrc",
        async: true,
        success: function (res) {
            console.log(res.split())
            arr = res.split('\n');
            console.log(arr);
//处理歌词的正则
               var reg = /\[(\d{2}:\d{2}.\d{0,3})\](.+)/;
               arr.forEach(function (item) {
                   if (reg.exec(item) != null) {
                       timer.push(reg.exec(item)[1])
                       gc.push(reg.exec(item)[2])
                   }
               })
//          $(".gq").ontimeupdate(function(){
//          	
//          })
//设置监听音频的timeupdate事件,并获取播放的事件
               $("#gq").on("timeupdate", function () {
                   //播放时间
                   console.log(this.currentTime)
                   var bt = this.currentTime;
                   $.each(timer, function (index, item) {
                       var t = item.split(":")[0] * 60 + item.split(":")[1] * 1;
                       //						t.toFixed(2);
                       if (parseInt(bt) == parseInt(t)) {
                           //							console.log(gc[index])
                           $(".gq_gc").html(gc[index])
                       }
                   });

               })

        }
    });




</script>

</html>